<template>
  <div
    class="item"
    :title="
      ['equipment'].includes(item.type)
        ? ''
        : `${item.name} ${item.price}金/1个`
    "
    @click.right="rigthClick(item)"
    @click.left="leftClick"
  >
    <ewg-tooltip>
      <img :src="item.img" :alt="item.name" />
      <div
        class="equip-icon"
        :class="'grade' + item.grade"
        ref="goodItem"
      ></div>
      <!-- <span v-if="!['equipment'].includes(item.type)">{{ item.count }}</span> -->
      <template
        v-slot:content
        v-if="item.type === 'equipment' && equipData.flag"
      >
        <equip-tooltip :equip="equipData.value"></equip-tooltip>
      </template>
    </ewg-tooltip>
    <teleport to="body" v-if="isMenuShow">
      <div class="left-menu" :style="{ left: left + 'px', top: top + 'px' }">
        <template v-for="o of leftMenu" :key="o.name">
          <div
            class="clickScale"
            v-if="!(o.hidden && o.hidden(item))"
            @click="o.func(item)"
          >
            {{ o.name }}
          </div>
        </template>
      </div>
    </teleport>
  </div>
</template>
<script lang="ts">
import { useStore } from "@/store";
import consumablesPools from "@/const/consumables/pools";
import { MutationTypes } from "@/store/player/mutation-types";
import { SysActionTypes } from "@/store/sys/action-types";
import { OptionsDataType } from "@/const/indexedDB";
import { Equipment, EquipDataType } from "@/const/equips/equipmentType";
import { reactive, ref } from "vue";
import { Consumables } from "@/const/consumables/type";
import { SysInfo } from "@/const/sys";
const store = useStore();
export default {
  name: "GoodItem",
  props: ["item"],
  setup(props: any) {
    const equipDataInit: EquipDataType = {
      flag: false
    };
    const equipData = reactive(equipDataInit);
    const goodItem = ref();
    const isMenuShow = ref(false);

    const rigthClick = (row: PackItem) => {
      if (row.price <= store.state.userInfo.money) {
        const consumables: Consumables = consumablesPools.get(row.name);
        // 购买消耗品
        store.commit(
          MutationTypes.PUT_ITEM_TO_PACKAGE,
          consumables.toPackItem(1)
        );
        store.commit(MutationTypes.COST_MONEY, row.price);
      } else {
        store.dispatch(
          SysActionTypes.SYS_PUSH_INFO,
          new SysInfo("买不起了你个穷B", 1)
        );
      }
    };
    const getEquipDetail = async (row: PackItem) => {
      const params: OptionsDataType = {
        index: row.id
      };
      const data: Equipment = await store.dispatch(
        SysActionTypes.SYS_GET_EQUIP,
        params
      );
      if (data) {
        data.id = row.id;
        equipData.value = data;
        equipData.flag = true;
      }
    };
    const multyBuy = (mount: number) => {
      return (row: PackItem) => {
        const costMoney = row.price * mount;
        if (costMoney <= store.state.userInfo.money) {
          const consumables: Consumables = consumablesPools.get(row.name);
          // 购买消耗品
          store.commit(
            MutationTypes.PUT_ITEM_TO_PACKAGE,
            consumables.toPackItem(mount)
          );
          store.commit(MutationTypes.COST_MONEY, costMoney);
        } else {
          store.dispatch(
            SysActionTypes.SYS_PUSH_INFO,
            new SysInfo("买不起了你个穷B", 1)
          );
        }
      };
    };
    const leftMenu = [
      {
        name: "购买",
        func: multyBuy(1)
      },
      {
        name: "买10个",
        func: multyBuy(10),
        hidden: (row: PackItem) => {
          return row.type === "equipment";
        }
      },
      {
        name: "买100个",
        func: multyBuy(100),
        hidden: (row: PackItem) => {
          return row.type === "equipment";
        }
      }
    ];
    const left = ref(0);
    const top = ref(0);

    const setMenuShowFalse = (event: any) => {
      const flag = event.target !== goodItem.value;
      if (flag) {
        isMenuShow.value = false;
        document.removeEventListener("click", setMenuShowFalse);
      }
    };
    const leftClick = (e: any) => {
      document.removeEventListener("click", setMenuShowFalse);
      const { pageX, pageY } = e;
      isMenuShow.value = true;
      left.value = pageX + 5;
      top.value = pageY + 5;
      document.addEventListener("click", setMenuShowFalse);
    };

    // 如果是装备则获取详情
    if (props.item.type === "equipment") {
      getEquipDetail(props.item);
    }

    return {
      goodItem,
      rigthClick,
      equipData,
      isMenuShow,
      leftMenu,
      leftClick,
      left,
      top
    };
  }
};
</script>
<style lang="scss" scoped>
.item {
  width: 40px;
  height: 40px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
  span {
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
  }
}
.left-menu {
  position: absolute;
  top: 0;
  left: 0;
  border: 3px solid $--color-white;
  background: $--color-black-half-quarter;
  border-radius: $--border-radius;
  padding: 5px;
  & > div {
    padding-bottom: 5px;
    color: $--color-white;
    &:last-of-type {
      padding-bottom: 0px;
    }
  }
}
</style>
